<script setup lang="ts">
import {
  NLayout, NLayoutSider, NLayoutHeader, NLayoutFooter, NLayoutContent, NPageHeader,
  NMenu, type MenuOption, useMessage, NAvatar, NBreadcrumb, NBreadcrumbItem, NSpace, NTag, NGrid,
} from 'naive-ui';
const router = useRouter(), route = useRoute()

const menus: MenuOption[] = [
  {
    label: '首页',
    key: '/'
  },
  {
    label: '关于',
    key: '/about',
  },
  {
    label: '禁用布局页面',
    key: '/disabled-layout'
  },

]
Array.from({ length: 20 }).map<MenuOption>((_, index) => {
  return {
    label: '关于' + index,
    key: '/about/' + index,
  }
}).forEach(i => {
  menus.push(i)
})
const choosedRoute = ref<string>(route.path)
watch(choosedRoute, (path) => {
  router.push(path)
})
const message = useMessage()
function handleBack() {
  message.info('后退')
}
</script>
<template>
  <n-layout has-sider style="height: 100vh;">
    <n-layout-sider bordered :native-scrollbar="false">
      <ClientOnly>
        <NMenu accordion :options="menus" v-model:value="choosedRoute" />
      </ClientOnly>

    </n-layout-sider>
    <n-layout content-style="height:100vh;">
      <n-layout-header position="absolute" style="padding: 14px;z-index: 1">
        <NSpace>
          <NTag style="cursor: pointer;" :bordered="false" v-for="i of 10" closable>标签页{{ i }}</NTag>
        </NSpace>
      </n-layout-header>
      <NLayout :native-scrollbar="false" style="margin-top: 56px; height: calc(100vh - 56px);">
        <n-layout-content content-style="padding:24px;min-height:calc(100vh - 56px);">
          <slot />
        </n-layout-content>
        <!-- <n-layout-footer>
          <AppFooter />
        </n-layout-footer> -->
      </NLayout>

    </n-layout>
  </n-layout>
</template>
